<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>气泡loading效果</title>
	<style type="text/css">
		body{
		  color: #222;
		}
		h1{
			font-size: 14px;
			font-family: "Microsoft Yahei";
			text-align: center;
		}
		.spinner{
		  position:relative;
		  width:40px;
		  height:40px;
		  margin: 0 auto;
		}
		.double-bounce1,
		.double-bounce2{
		  position:absolute;
		  width:100%;
		  height:100%;
		  left:0;
		  top:0;
		  border-radius:50%;
		  background-color:green;
		  opacity:.3;
		  -webkit-animation:bounce 2s infinite ease-in-out;
		  animation:bounce 2s infinite ease-in-out;
		}
		.double-bounce2{
		  -webkit-animation-delay:-1s;
		  animation-delay:-1s;
		}
		@-webkit-keyframes bounce{
		  0%,100%{
		    -webkit-transform:scale(0.0);
		  }
		  50%{
		    -webkit-transform:scale(1.0);
		  }
		}
		@keyframes bounce{
		  0%,100%{
		    transform:scale(0);
		  }
		  50%{
		    transfrom:scale(1);
		  }
		}
	</style>
</head>
<body>
	<h1>请使用webkit内核标准浏览器查看效果</h1>
	<div class="spinner">
	  <div class="double-bounce1"></div>
	  <div class="double-bounce2"></div>
	</div>
</body>
</html>